import { useTheme } from '../context/ThemeContext';
import { AskForm } from '../types/forms';

interface AskFormEditProps {
    form: Partial<AskForm>;
    onChange: (form: Partial<AskForm>) => void;
    onSubmit: () => void;
    onCancel?: () => void;
    submitLabel?: string;
}

const AskFormEdit: React.FC<AskFormEditProps> = ({
    form,
    onChange,
    onSubmit,
    onCancel,
    submitLabel = '提交'
}) => {
    const { theme } = useTheme();

    const inputStyle = {
        padding: '10px',
        borderRadius: '4px',
        border: '1px solid #ddd',
        backgroundColor: theme === 'light' ? '#fff' : '#495057',
        color: theme === 'light' ? '#000' : '#fff'
    };

    return (
        <div style={{ marginBottom: '20px' }}>
            <h3 style={{ color: theme === 'light' ? '#666' : '#ccc', marginBottom: '5px' }}>填写信息</h3>
            <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: '10px' }}>
                <label>提交人：</label>
                <input
                    type="text"
                    value={form.submitter || ''}
                    onChange={(e) => onChange({ ...form, submitter: e.target.value })}
                    style={inputStyle}
                />
                <label>所属公司：</label>
                <input
                    type="text"
                    value={form.company || ''}
                    onChange={(e) => onChange({ ...form, company: e.target.value })}
                    style={inputStyle}
                />
                <label>所需部门：</label>
                <input
                    type="text"
                    value={form.department || ''}
                    onChange={(e) => onChange({ ...form, department: e.target.value })}
                    style={inputStyle}
                />
                <label>岗位：</label>
                <input
                    type="text"
                    value={form.position || ''}
                    onChange={(e) => onChange({ ...form, position: e.target.value })}
                    style={inputStyle}
                />
                <label>是否内审员：</label>
                <select
                    value={form.isInternalAuditor ? '是' : '否'}
                    onChange={(e) => onChange({ ...form, isInternalAuditor: e.target.value === '是' })}
                    style={inputStyle}
                >
                    <option value="否">否</option>
                    <option value="是">是</option>
                </select>
                <label>问题：</label>
                <textarea
                    value={form.question || ''}
                    onChange={(e) => onChange({ ...form, question: e.target.value })}
                    style={{ ...inputStyle, height: '100px' }}
                />
            </div>
            <div style={{ marginTop: '20px', display: 'flex', gap: '10px', justifyContent: 'flex-end' }}>
                {onCancel && (
                    <button
                        onClick={onCancel}
                        style={{
                            padding: '10px',
                            backgroundColor: theme === 'light' ? '#ccc' : '#6c757d',
                            color: theme === 'light' ? '#000' : '#fff',
                            border: 'none',
                            borderRadius: '4px',
                            cursor: 'pointer'
                        }}
                    >
                        取消
                    </button>
                )}
                <button
                    onClick={onSubmit}
                    style={{
                        padding: '10px',
                        backgroundColor: theme === 'light' ? '#007bff' : '#0056b3',
                        color: 'white',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer'
                    }}
                >
                    {submitLabel}
                </button>
            </div>
        </div>
    );
};

export default AskFormEdit; 